<template>
  <el-drawer v-model="drawerVisible" :z-index="1000" :destroy-on-close="true" size="100%" :title="`${drawerProps.title}`">
    <div class="header">
      <div class="examTitle">考试1-理论（试卷2023-0228-理论）</div>
      <div class="examSubTitle">
        <div class="examDuration">
          <span class="examDuration__lab">考试时长：</span>
          <span class="examDuration__text">200</span>
          <span class="examDuration__unit">分钟</span>
        </div>
        <div class="examinee">
          <span class="examinee__lab">考生姓名：</span>
          <span class="examinee__text">学生1</span>
        </div>
      </div>
    </div>
    <el-form
      ref="answerFormRef"
      label-width="120px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
      :before-close="_colse"
    >
    </el-form>
    <template #footer>
      <el-button @click="_colse">取消</el-button>
      <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="CabineDrawer">
import { ref, reactive } from "vue";
import { FormInstance } from "element-plus";
import { Exam } from "@/api/interface";
// import { CirclePlus } from "@element-plus/icons-vue";
import { getTestInfo } from "@/api/modules/exam1Manage/examSelf";
const rules = reactive({});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<Exam.ResExamSelfList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  resetTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});
// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  await getTestInfo({ controlId: drawerProps.value.row.controlId as number }).then(res => {
    console.log(res);
  });
};

// 提交数据（新增/编辑）
const answerFormRef = ref<FormInstance>();
/**
 * 新增控制信息
 */
// const _addControlItem = () => {
//   controlList.value.push({ id: controlList.value.length + 1, deviceId: "", teacherId: "" });
// };
/**
 * 删除控制信息
 */
// const _delControlItem = (curIdx: number) => {
//   controlList.value.splice(curIdx, 1);
// };
/**
 * 关闭弹窗
 */
const _colse = () => {
  drawerVisible.value = false;
  answerFormRef.value && answerFormRef.value.resetFields();
};
/**
 * 提交信息
 */
const handleSubmit = () => {
  answerFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};
defineExpose({
  acceptParams
});
</script>
<style lang="scss" scope>
.header {
  .examTitle {
    padding: 10px 0 20px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }
  .examSubTitle {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    .examDuration {
      .examDuration__text {
        padding: 0 10px;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
    }
    .examinee {
      .examinee__text {
        padding: 0 10px;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
    }
  }
}
</style>
